<template>
  <el-dialog
    v-if="model"
    draggable
    append-to-body
    :top="props.top ? props.top : '10vh'"
    v-model="model"
    v-bind="$attrs"
    :title="props.title"
    :width="props.width"
    :show-close="props.showClose"
    @closed="onClosed"
    @opened="onOpened"
    @close="onClose"
    @open="onOpen"
    class="cus-dialog">
    <slot />
    <template #footer>
      <div style="display: flex; justify-content: flex-end; margin-right: 30px;padding-bottom:20px">
        <slot name="footer" />
      </div>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'custom-dialog',
}
</script>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  top: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '50%',
  },
  showClose: {
    type: Boolean,
    default: true,
  },
})
const emits = defineEmits(['closed', 'opened', 'close', 'open'])
const model = defineModel()
const onClosed = () => {
  emits('closed')
}
const onOpened = () => {
  emits('opened')
}
const onClose = () => {
  emits('close')
}
const onOpen = () => {
  // console.log('custom-dialog open');
  emits('open')
}
const close = () => {
  // console.log('custom-dialog close');
  emits('close')
  model.value = false
}
defineExpose({
  close,
})

</script>
<style lang="scss">
.cus-dialog {
  padding: 0;

  .ep-dialog__header {
    background: rgb(230, 239, 245);
    padding: 10px;

    .ep-dialog__headerbtn {
      right: 10px;
      font-size: 20px;
    }
  }

  .ep-dialog__body {
    padding: 10px 10px 0 10px;
  }
}
</style>
